import { Image } from 'antd';
import React, { useState } from 'react';
const Preview = ({ cover }) => {
  const [visible, setVisible] = useState(false);
  return (
    <>
      <Image 
        preview={{
          visible: false,
        }}
        width='100%'
        height={100}
        style={{ objectFit: 'cover', overflow: 'inherit' }}
        src={cover.images[0]}
        onClick={() => setVisible(true)}
      />
      <div
        style={{
          display: 'none',
        }}
      >
        <Image.PreviewGroup
          preview={{
            visible,
            onVisibleChange: (vis) => setVisible(vis),
          }}
        >
          {
            cover.images.map(item => <Image src={item} key={item} />)
          }
        </Image.PreviewGroup>
      </div>
    </>
  );
};
export default Preview;